<template>
  <div class="mine">
    <van-cell is-link class="top" @click="admin">
      <div class="user">
        <img :src="data.src" alt />
      </div>
      <div class="usermess">
        <div class="username">{{data.uname}}</div>
        <div class="tel">{{data.username}}</div>
      </div>
    </van-cell>
    <div class="umoney">
      <div class="umoney-r formid">
        <div class="numr">
          {{data.hb}}
          <span>个</span>
        </div>
        <div class="rb">红包</div>
      </div>
      <div class="umoney-g formid">
        <div class="numg">
          {{data.jinbi}}
          <span>个</span>
        </div>
        <div class="gd">金币</div>
      </div>
    </div>
    <van-cell-group>
      <van-cell is-link @click="myaddress" style="font-size:14px">
        <van-icon name="map-marked" class="map_marked" color="#4aa5f0" size="18px" />我的地址
      </van-cell>
    </van-cell-group>
    <van-cell-group>
      <van-cell is-link @click="exchange" style="font-size:14px">
        <van-icon name="bag" class="map_marked" color="rgb(255,215,000)" size="18px" />金币商城
      </van-cell>
      <van-cell is-link @click="menoy" style="font-size:14px">
        <van-icon name="gift" class="map_marked" color="#fc7b53" size="18px" />分享拿20元现金
      </van-cell>
    </van-cell-group>
    <van-cell is-link style="font-size:14px" @click="cservice">
      <van-icon name="service" class="map_marked" color="#4aa5f0" size="18px" />我的客服
    </van-cell>
    <van-cell is-link style="font-size:14px" @click="download">
      <span class="elmapp"></span>下载饿了么APP
    </van-cell>
    <van-cell is-link @click="rule" style="font-size:14px">
      <van-icon name="label" class="map_marked" color="#4aa5f0" size="18px" />规则中心
    </van-cell>
    <van-cell-group>
      <div class="bottom">
        <span @click="privacy">隐私政策</span>
      </div>
    </van-cell-group>

    <div class="tarbar">
      <van-tabbar v-model="active" fixed>
        <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
        <van-tabbar-item icon="browsing-history-o" to="/find">发现</van-tabbar-item>
        <van-tabbar-item icon="orders-o" to="/order" @click="toder">订单</van-tabbar-item>
        <van-tabbar-item icon="setting-o" to="/mine">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script>
import { log } from "util";
export default {
  data: () => ({
    data: {
      active: 3,
      username: "未登录",
      uname: "",
      src: "",
      jinbi: "0",
      hb: "0"
    },
    active: 3
  }),
  created() {
    this.getuserinfos();
    this.active = 3;
  },
  methods: {
    privacy() {
      this.$router.push("/mine/privacy");
    },
    download() {
      this.$router.push("/mine/download");
    },
    admin() {
      this.$router.push("/mine/admin");
    },
    cservice() {
      this.$router.push("/mine/cservice");
    },
    rule() {
      this.$router.push("/mine/rule");
    },
    menoy() {
      this.$router.push("/find/menoy");
    },
    exchange() {
      this.$router.push("/mine/exchange");
    },
    myaddress() {
      this.$router.push("/mine/myaddress");
    },

    getuserinfos() {
      if (localStorage.getItem("user")) {
        this.data = JSON.parse(localStorage.getItem("user"));
      }
      
      console.log(this.data);
    },
    toder() {
      console.log(111);
      if (!localStorage.getItem("user")) {
        return this.$router.push("/order2");
      }
      this.$router.push("/order");
    }
  }
};
</script>
<style lang="less" scoped>
html {
  background: #eee;
}
.mine {
  height: 100%;
  background: #eee;
  flex-direction: column;
  .top {
    background-image: linear-gradient(90deg, #0af, #0094ff);
    padding: 20px;
    color: #fff;
    .van-cell__right-icon {
      color: #fff;
    }
    .user {
      display: inline-block;
      height: 60px;
      width: 60px;
      border-radius: 50%;
      background-image: url(http://shadow.elemecdn.com/faas/h5/static/sprite.3ffb5d8.png);
      background-position: 0px 0px;
      background-size: 100%;
      margin-right: 15px;
      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
    }
    .usermess {
      display: inline-block;
      vertical-align: top;
      color: #fff;
      .username {
        font-size: 20px;
      }
      .tel {
        font-size: 12px;
      }
    }
  }
  .umoney {
    background: #fff;
    display: flex;
    .formid {
      padding: 30px 0;
      text-align: center;
      font-size: 12px;
    }
    .umoney-r {
      border-right: 1px solid #eee;
      flex: 0.5;
      box-sizing: border-box;
      .numr {
        font-size: 20px;
        color: red;
      }
      .rb {
        font-weight: bolder;
      }
    }
    .umoney-g {
      flex: 0.5;
      .numg {
        font-size: 20px;
        color: gold;
      }
      .gd {
        font-weight: bolder;
      }
    }
  }
  .van-cell-group {
    margin-top: 15px;
    .van-cell {
      font-size: 16px;
      color: #333;
    }
  }
  .bottom {
    background: #eee;
    text-align: center;
    height: 98px;
    padding-top: 20px;
    font-size: 16px;
    color: #0094ff;
  }
  .elmapp {
    width: 15px;
    height: 15px;
    display: inline-block;
    background-image: url(
      https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1622870841,1915705685&fm=26&gp=0.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 2px;
    vertical-align: -2px;
    margin-right: 12px;
  }
  .map_marked{
    vertical-align: -2px;
    margin-right: 12px;
  }
}
</style>